/**
 * Vue3 中有一个 Telport 的组件
 *    作用是为了将组件元素渲染到别的元素中（body）能够解决元素嵌套太深时，样式错乱问题。
 *
 * React 中有相同的东西，ReactDOM.createPortal()
 */

import { createPortal } from "react-dom";
import "./index.scss";

const MyDialog = () => {
  return createPortal(
    <div className="my-dialog">
      <div className="my-dialog__mark"></div>
      <div className="my-dialog__container">
        <div className="my-dialog__header"></div>
        <div className="my-dialog__body"></div>
        <div className="my-dialog__footer"></div>
      </div>
    </div>,
    document.querySelector("body") as HTMLElement
  );
};

export default MyDialog;
